<template lang="pug">
.bran-cont
    .top
        el-breadcrumb(separator="/")
            el-breadcrumb-item(:to="{ path: item.index }" v-for="item in data" :key="item.index") {{item.label}}
    .bot-cont
        router-view
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted, watch } from 'vue'
import { mainStore } from '@/stores'
const store = mainStore()
const data = ref([])
watch(()=>store.breadData, (newVal)=>{
    let arr = []
    newVal.forEach(val=>{
        val.children.forEach(item => {
            if(item.active){
                arr.push(val)
                arr.push(item)
            }
        })
    })
    data.value = [{ label: '当前位置' }, ...arr]
}, { deep: true, immediate: true })
</script>

<script>
import sysApi from '@system/sysApi'
export default {
    data(){
        return {}
    },
    mounted(){
    },
    methods: {
        selectMenu(item){
            const name = item.index
            this.currentIndex = name
        }
    }
}
</script>
<style lang="less" scoped>
@import '@/assets/theme.less';
.bran-cont{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    .top{
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        margin-bottom:5px;
        border-bottom: 1px solid #ccc;
    }
    .bot-cont{
        flex-grow: 1;
        overflow: hidden;
    }
}
</style>
